<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>子节点的获取和访问</title>
    <script>
        function p(s) {
            document.write("<p class='content'>" + s + "</p>");
        }
    </script>
    <style type="text/css" media="screen">
        body {
            width: 960px;
            margin: 0 auto;
            font: 18px/1.8em '微软雅黑';
        }

        h1 {
            color: green;
        }

        h2 {
            border-bottom: 2px solid green;
            line-height: 1.8em;
        }

        p {
            font-size: 20;
            padding: 5px 0;
            font-weight: bolder;
        }

        p.content {
            font-weight: normal;
            padding-left: 2em;
            line-height: 1.5em;
            margin: 0;
        }

    </style>
</head>

<body onload="searchDOM()">
    <ul id="myList">
        <li>HTML</li>
        <li>CSS</li>
        <li id="active">JavaScript</li>
    </ul>
    <script>
        function searchDOM() {
            var oLi = document.getElementById('myList');
            var DOMString = "";
            if (oLi.hasChildNodes()) {
                var oChild = oLi.childNodes;
                for (var i = 0; i < oChild.length; i++) {
                    DOMString += oChild[i].nodeName + "\n";
                }
            }
            console.log(DOMString);
            var myItem = document.getElementById('active');
            console.log(myItem.parentNode.tagName);
        }
    </script>
</body>

</html>
